<template>
  <div class="paper-create">
    <h2>创建试卷</h2>
    <div class="content">
      <div class="create-methods">
        <!-- 手动创建 -->
        <div class="method-card" @click="handleManualCreate">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../assets/manual-create.svg" class="method-image">
            <div class="method-info">
              <h3>手动创建</h3>
              <p>从题库中选择题目或手动编辑，自由组合试卷</p>
              <el-button type="primary" plain>开始创建</el-button>
            </div>
          </el-card>
        </div>
        
        <!-- 规则创建 -->
        <div class="method-card" @click="handleRuleCreate">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../assets/rule-create.svg" class="method-image">
            <div class="method-info">
              <h3>规则创建</h3>
              <p>设置题目类型、数量和难度等规则，智能生成试卷</p>
              <el-button type="primary" plain>开始创建</el-button>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="PaperCreate">
import { useRouter } from 'vue-router'

const router = useRouter()

// 处理手动创建
const handleManualCreate = () => {
  router.push('/create/manual')
}

// 处理规则创建
const handleRuleCreate = () => {
  router.push('/create/rule')
}
</script>

<style scoped>
.paper-create {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  min-height: calc(100vh - 120px);
}

.content {
  margin-top: 40px;
}

.create-methods {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px;
}

.method-card {
  width: 300px;
  cursor: pointer;
  transition: transform 0.3s;
}

.method-card:hover {
  transform: translateY(-5px);
}

.method-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.method-info {
  padding: 20px;
  text-align: center;
}

.method-info h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #303133;
}

.method-info p {
  color: #606266;
  font-size: 14px;
  margin-bottom: 20px;
  min-height: 40px;
}

:deep(.el-card) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-card:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style> 